<template>
  <div class="header clearfix">
    <router-link class="admin pull-right" to="/admin">admin</router-link>
    <div class="header-content clearfix">
      <router-link to="/home" class="logo">
        
      </router-link>
      <!-- <div class="chatBtn"><router-link to="/chat" tag="button">在线聊天室</router-link></div> -->
      <div class="login-box pull-right">
        <span class="status" v-if="userInfo">
          <router-link :to="'/personal/' + userInfo._id ">{{userInfo.user}}</router-link>
          <a @click.prevent="exit" href="#">退出</a>
        </span> 
        <span v-show="!userInfo">
          <router-link to="/login">登陆</router-link>
          <router-link to="/register">注册</router-link>
        </span>
      </div>
    </div>
  </div>
</template>

<style type="text/css">
  .header {
    background: #fff;
    -moz-box-shadow: 0px 1px 3px #CFCFCF;
    -webkit-box-shadow: 0px 1px 3px #CFCFCF;
    box-shadow: 0px 1px 3px #CFCFCF;
    margin-bottom: 3px;
    position: relative;
  }
  .header-content {
    position: relative;
    width: 960px;
    margin: 0 auto;
    height: 75px;
    line-height: 75px;
    padding: 0 10px;
  }

  .header a:hover {
    text-decoration: none;
  }

  .logo{
    display: inline-block;
    width: 145px;
    height: 55px;
    margin-top: 10px;
    background: url(../../assets/logo.png);
  }
  .login-box{
    font-size: 16px;
  }
  .login-box a{
    color: #333;
    padding: 0 10px;
    display: inline-block;
  }

  /*聊天室按钮开始*/
  .chatBtn {
    width: 100px;
    height: 28px;
    position: absolute;
    top: 50%;
    margin-top: -14px;
    left: 50%;
    margin-left: -50px;
    text-align: center;
    line-height: 28px;
    perspective:50;
    -webkit-perspective:50; /* Safari and Chrome */
  }
  .chatBtn button {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: rotateX(15deg);
    -webkit-transform: rotateX(15deg); /* Safari and Chrome */
    box-shadow: 2px 2px 5px #ccc
  }
  .chatBtn button:hover {
    background: #333;
    color: #fff;
  }
  /*聊天室按钮结束*/
  

</style>

<script>
  import Storage from '../../servers/Storage'
  export default {
    methods: {
      exit () {
        // 退出成功
        this.$store.commit('unLogined')
        Storage.set(Storage.key, '')
      }
    },
    computed: {
      userInfo () {
        return this.$store.state.userInfo
      }
    }
  }

</script>